<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Beginner's Guide - Chapter 2 - loading a cone with AJAX + JSON </title>

    <script type="text/javascript" src="/src/js/gl-matrix-min.js"></script>
    <script type="text/javascript" src="/src/js/utils.js"></script>
    <script type="text/javascript" src="/src/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="/src/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="/src/js/prettify.js"></script>
    <script type="text/javascript" src="/src/js/codeview.js"></script>

    <!--    Fragment Shader-->
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif

        uniform vec3 modelColor;

        void main(void){
            gl_FragColor = vec4(modelColor, 1.0);
        }
    </script>
    <!--    Vertex Shader-->
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;

        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;

        void main(void){
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            gl_PointSize = 3.0;
        }
    </script>
</head>

<body>
<div id="top">
    <h1>WebGL Beginner's Guide - Chapter 2</h1>
    <h2>Asynchronous Loading with JSON and AJAX</h2>
    <div id="logo-packt"><img src="packt.gif" alt=""></div>
    <p>Please review the functions loadModel and handleLoadedModel to understand how we can load complex geometries from
        files instead of specifying them directly into the webpage using JavaScript arrays.</p>
</div>
<div id="contents">
    <div id="canvasContainer">
        <canvas id="canvas-element-id" width="480" height="400">
            Your browser does not support the HTML5 canvas element.
        </canvas>
    </div>
</div>
<div id="bottom">test
</div>
<script>cview.run();</script>
</body>

</html>
